<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header, .footer {
      width: 1200px;
      margin: 0 auto;
      background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      height: 120px;
      color: #fff;
    }

    .footer {
      height: 300px;
    }

    ul, li {
      list-style: none;
    }

    ul {
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      justify-content: space-between;
      padding-top: 10px;
    }

    li {
      width: 290px;
      border: 1px solid #333;
      margin-bottom: 10px;
      padding: 5px;
      box-sizing: border-box;
    }

    li > a > img {
      width: 278px;
      display: block;
    }

    .pagination {
      width: 1200px;
      margin: 10px auto;
      height: 50px;
      display: flex;
      align-items: center;
    }

    .pagination > .prev,
    .pagination > .next {
      width: 50px;
      height: 30px;
      cursor: pointer;
      background-color: orange;
      font-size: 24px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pagination > .disable {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .pagination > .total {
      font-size: 30px;
      font-weight: 700;
      margin: 0 20px;
    }

    .pagination > select {
      font-size: 22px;
      padding-left: 20px;
      margin-left: 30px;
    }
  </style>
</head>
<body>

  <div class="header">网页头部</div>
  <div class="pagination">
    <span class="prev disable">&lt;</span>
    <span class="total">1 / 100</span>
    <span class="next">&gt;</span>
    <select>
      <option value="4">4</option>
      <option value="8">8</option>
      <option value="12">12</option>
      <option value="16">16</option>
    </select>
  </div>
  <ul>

  </ul>
  <div class="footer">网页底部</div>
  <script src="./taobao.js"></script>

  <script>
        // 封装1个函数
        // 里边的代码被多个地方用到 
        // 用户决定看第几页   
        // 每页显示的条数 刚开始程序员决定  后期用户也可以决定 
        // 第几页        每页显示的条数   数据范围 下标
        // 1                4           0~4  
        // 2                4           4~8
        // 3                4           8~12
        // 4                4           12~16
        //已知              已知        未知-未知
                                        // 截取起始值 = (第几页-1)*每页显示的条数
                                        // 截取截止值 = 第几页*每页显示的条数
        // 每一页都得去总数据中截取   

        var totalele = document.querySelector('.total');
        var prevbtn = document.querySelector('.prev');
        var nextbtn = document.querySelector('.next');
        var selectele = document.querySelector('select');
        var current = 2; // 第几页  默认第一页
        var pagesize = 16;// 每页显示的条数 默认4条
        var total = 0; // 总共多少页
        var ulele = document.querySelector('ul')
        function bindhtml(){
            // 截取这一页的数据
            var bindList = alldata.slice((current-1)*pagesize,current*pagesize);
            // 渲染这一页的数据到页面上  
            ulele.innerHTML = bindList.reduce(function(prev,item){
                return prev += `
                        <li>
                <a href="${item.detail_url}"><img src="${item.pic_url}
                    " alt=""></a>
                <p>${item.title}</p>
                <p>价格:${item.price}</p>
                <p>销量:${item.sales}</p>
                <p>店名:${item.seller_nick}</p>
                <p>更新时间:${item.data_update}</p>
            </li>
                `
            },'');
            // 根据每页显示多少条 
            // 总共的条数 

            // 计算总共多少页 = 总数据条数 / 每页的条数 
            total = Math.ceil(alldata.length / pagesize);
            totalele.innerText = `${current} / ${total} `

            // 当前的页码 
            // 总共的页码 
            // 同步到页面上  


            // 判断上一页按钮能够点击  
            // 当前页码 current如果 =1 上一页按钮不能点击
            // 如果不能点击   class="prev disable"
            // 能点击 class="prev"
            // prevbtn.className = 'prev disable';
            // prevbtn.className = 'prev';

            prevbtn.className = current ==1?"prev disable":'prev';

            // 判断下一页按钮能够点击 
            // 当前页码 current如果 =总页数  下一页按钮不能点击
            // 如果不能点击  class="next disable"
            // 能点击 class="next"
            nextbtn.className = current ==total?"next disable":'next';
            // 每页显示的条数  下拉框默认被选中 

            selectele.value = pagesize;
        }

        bindhtml();


        // 点击下一页  
        // current 页码 ++ 
        // 重新调用函数渲染下一页的数据
        nextbtn.onclick = function(){
            // 防止越界 到总页数 停止 
            if(current == total) return;
            current++;
            bindhtml();
        }

        // 点击上一页
         // current 页码 --
         // 重新调用函数渲染上一页的数据
         prevbtn.onclick = function(){
            if(current == 1) return;
            // 防止越界 到第一页 停止 
            current--;
            bindhtml();
        }

        // 用户点击下拉框  前后如果不一样 说明修改了 
        // 这时候触发  change事件 
        // change事件 就是 表单 前后内容发生了变化   触发 

        selectele.onchange = function(){
            // alert(selectele.value); 选中的元素  
            //selectele.value得到的是字符串  
            // pagesize 需要 数值  需要字符串->数值 
            pagesize  = selectele.value - 0 ;

            current = 1;
            // 调用函数渲染数据 
            bindhtml();

        }
  </script>
</body>
</html>